import React from 'react';
import { ColumnsType } from 'antd/es/table';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { SettingOutlined } from '@ant-design/icons';
import { Card, Space, Button, Table, Modal, Checkbox, Typography } from 'antd';
import request from '@/utils/request';
import MRPSearch from './MRPSearch';
import MRPRun from './MRPRun';
import moment from 'moment';

interface User {
  orderNum: number,
  orderLine: number,
  partNum: string,
  partDescription: string,
  revisionNum: string,
  requireQty: number,
  supplyQty: number,
  sugQty: number,
  onhandQty: number,
  poQty: number,
  jobQty: number,
  inspQty: number,
  dmrQty: number,
  nonConfQty: number,
  ium: string,
  jobNum: string,
  assemblySeq: number,
  jobSeq: number,
  opCode: string,
  opDesc: string,
  dueDate: Date,
  isPrep: boolean,
  id: string
}
const { Text } = Typography;
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      dataSource: [],
      skipCount: 0,
      maxResultCount: 10
    };
  }
  componentDidMount() {
    this.query()
  }
  query = () => {
    const { maxResultCount, skipCount, params } = this.state;
    this.setState({ loading: true })
    request('/api/services/app/MRPDetail/GetList', {
      method: 'GET',
      params: {
        skipCount,
        maxResultCount,
        ...params
      },
    }).then((response) => {
      if (response) {
        if (response.success) {
          this.setState({ totalCount: response.result.totalCount })
          this.setState({ dataSource: response.result.items })
        }
      }
      this.setState({ loading: false })
    });
  };
  handleSearch = (values: any) => {
    this.setState(
      {
        params: { ...values },
        skipCount: 0,
      },
      this.query,
    );
  };

  render() {
    const columns: ColumnsType<User> = [

      {
        title: '产品编码',
        dataIndex: 'partNum',  
        fixed: 'left'      
      },
      {
        title: '描述',
        dataIndex: 'partDescription',
        ellipsis: true,
        width: 50,
        fixed: 'left'
      },
      {
        title: '工单号',
        render: (record: any) => (record.jobNum + '-' + record.assemblySeq + '-' + record.jobSeq)
      },
      {
        title: '需求量',
        dataIndex: 'requireQty',
      },
      {
        title: '供应量',
        dataIndex: 'supplyQty',
        render: (text: any, record: any) => <Text strong type={record.supplyQty < record.requireQty ? "danger" : "success"}>{text}</Text>
      },
      {
        title: '需求日期',
        dataIndex: 'dueDate',
        render: (text: any) => <span>{text ? moment(text).format('YYYY-MM-DD') : text}</span>
      },
      {
        title: '现存量',
        dataIndex: 'onhandQty',
      },
      {
        title: '采购',
        dataIndex: 'poQty',
      },
      {
        title: '建议',
        dataIndex: 'sugQty',
      },
      {
        title: '工单',
        dataIndex: 'jobQty',
      },
      {
        title: '在检',
        dataIndex: 'inspQty',
      },
      {
        title: 'DMR',
        dataIndex: 'dmrQty',
      },
      {
        title: '不合格',
        dataIndex: 'nonConfQty',
      },

      {
        title: '订单号',
        render: (record: any) => (record.orderNum + '-' + record.orderLine + '-' + record.orderRelNum)
      },
      
      {
        title: '齐套',
        dataIndex: 'isPrep',
        render: (text: boolean) => <Checkbox checked={text} />,
        fixed: 'right'
      },
    ];
    const { dataSource, visible, maxResultCount, totalCount, loading } = this.state;
    return (
      <PageHeaderWrapper title={false}>
        <Card title="物料需求计划" extra={<Space id="S1">
          <Button type="default" danger onClick={() => this.setState({ visible: true })} icon={<SettingOutlined />}>运行MRP</Button>
        </Space>}>
          <MRPSearch onSearch={this.handleSearch}>
          </MRPSearch>
          <Table
            rowKey="id"
            loading={loading}
            columns={columns}
            dataSource={dataSource}
            scroll={{ x: 'max-content' }}
            pagination={{
              onChange: page => {
                this.setState({ skipCount: (page - 1) * maxResultCount }, () => {
                  this.query();
                })

              },
              pageSize: maxResultCount,
              total: totalCount,
              showTotal: total => `共 ${total} 条`
            }}
          />
        </Card>
        <Modal
          width={600}
          title="运行MRP"
          visible={visible}
          destroyOnClose={true}
          onCancel={() => this.setState({ visible: false })}
          footer={false}
        >
          <MRPRun />
        </Modal>
      </PageHeaderWrapper>
    );
  }
}
export default ViewPage;
